<template>
    <div class="movie-detail">
        <div class="mask"></div>
        <div class="poster-bg" :style="{ 'background-image': 'url(' + movieInfo.img + ')' }"></div>
        <div class="moive-info-show">
            <!-- 左侧图片 -->
            <div class="poster">
                <img :src="movieInfo.img" alt="" />
            </div>
            <!-- 中间内容 -->
            <div class="mid-text">
                <div class="movie-name">{{ movieInfo.nm }}</div>
                <div class="movie-enm">{{ movieInfo.enm }}</div>
                <div class="movie-score">
                    <span>{{ movieInfo.sc == 0 ? movieInfo.scoreLabel : movieInfo.sc }}</span>
                    <span>({{ movieInfo.snum >= 1.0 ? peopleNum + "万人评" : peopleNum + "人评" }})</span>
                </div>
                <div class="movie-type">
                    {{ movieInfo.cat }}
                    <span v-show="movieInfo.ver == '2D' ? false : true"></span>
                </div>
                <div class="movie-adress">{{ movieInfo.src }}/{{ movieInfo.dur }}分钟</div>
                <div class="pub-desc">{{ movieInfo.pubDesc }}</div>
            </div>
            <!-- 右侧箭头 -->
            <div class="right-btn">
                <span class="iconfont icon-arrow-right"></span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, defineProps } from "@vue/runtime-core";

const props = defineProps({
    movieInfo: {
        type: Object,
        default: function () {
            return {};
        },
    },
});

const peopleNum = computed(() => {
    let num = props.movieInfo.snum;
    if (props.movieInfo.snum > 10000) {
        return (props.movieInfo.snum = Math.floor(num / 10000).toFixed(1));
    }
    return props.movieInfo.snum;
});
</script>

<style lang="less" scoped>
.movie-detail {
    position: relative;
    height: 188px;
    font-size: 12px;
    overflow: hidden;
    .mask {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: #333;
    }
    .poster-bg {
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
        position: absolute;
        -webkit-filter: blur(1.2rem);
        filter: blur(1.2rem);
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.55;
    }
}
.moive-info-show {
    div,
    span {
        color: white;
    }
    z-index: 99;
    height: 100%;
    padding: 19px 15px;
    .flex-center-between();
    .poster {
        img {
            width: 110px;
        }
    }
    .mid-text {
        width: 185px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .movie-name {
            font-size: 20px;
            font-weight: 700;
            overflow: hidden;
        }
        .movie-enm {
            opacity: 0.8;
        }
        .movie-score {
            span:first-child {
                font-size: 18px;
                font-weight: 700;
                color: #fc0;
            }
            span:last-child {
                margin-left: 5px;
                font-size: 12px;
                color: #fff;
                opacity: 0.8;
                font-weight: 700;
            }
        }
        .movie-type {
            span {
                display: inline-block;
                width: 26px;
                height: 100%;
                background: url();
                background-size: cover;
            }
        }
    }
}
</style>
